<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="layout/common :: headBar(~{::title}, ~{::link})">
    <title>登录</title>
    <link rel="stylesheet" type="text/css" href="/css/login.css" th:href="@{/css/login.css}">
</head>
<body>
<!--引入layui.js-->
<script th:replace="layout/common :: #layuiJS"></script>

<div class="login-form">
    <div class="layui-card">
        <div class="layui-card-header layui-card-header-content">欢迎登录<span th:text="${applicationDisplayName}"></span></div>
        <div class="layui-card-body">
            <!--登录提示消息-->
            <p class="login-validate-msg" th:if="${session.login_failure_message != null}" th:text="${session.login_failure_message}"></p>
            <p class="login-validate-msg" th:if="${param.logout}" th:text="|用户已登出|"></p>
            <form class="layui-form" action="/login" th:action="@{/login}" method="post" th:with="userLoginInfo=${session.user_login_info}">
                <div class="layui-form-item">
                    <label class="layui-form-label">用户名</label>
                    <div class="layui-input-inline">
                        <input type="text" name="username" th:value="${userLoginInfo != null ? userLoginInfo.get('username') : null}" required lay-verify="required" placeholder="请输入用户名" autocomplete="off"
                               class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">密&nbsp;&nbsp;&nbsp;&nbsp;码</label>
                    <div class="layui-input-inline">
                        <input type="password" name="password" th:value="${userLoginInfo != null ? userLoginInfo.get('password') : null}" required lay-verify="required" placeholder="请输入密码"
                               autocomplete="off" class="layui-input">
                    </div>
                    <div class="layui-form-mid layui-word-aux">认真填写哟</div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">验证码</label>
                    <div class="layui-input-inline">
                        <input type="password" name="validateCode" required lay-verify="required" placeholder="请输入验证码"
                               autocomplete="off" class="layui-input">
                    </div>
                    <div class="layui-form-mid layui-word-aux">
                        <img src="" th:src="@{/code/image}" alt="图片验证码">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">记住我</label>
                    <div class="layui-input-block">
                        <input type="checkbox" name="remember-me" lay-skin="switch">
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn layui-btn-normal" lay-submit lay-filter="formDemo">登录</button>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>&nbsp;
                        <a href="#" th:href="@{/user/reg}" style="color: dodgerblue;">没有账户？去注册</a>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

<script type="text/javascript">
    layui.use('form', function () {
       var form = layui.form;
    });
</script>
</body>
</html>